/*************************variables*************************/
@bgColor:#FCF6DE;
@mainGreen-color:#498E2D;
@mediumGreen-color:#6B963E;
@ligthGreen-color:#C4D868;
@ligtherGreen-color:#D3E674;
@yellow-color:#FFEC61;
@yellow-ligth-color:#FFEF8F;
@orange-color:#EA703F;
@orange-color2:#E97200;
@baseMargin:20px;
@fontSizeMedium:14px;
@menuheight:50px;

/*************************text styles*************************/
h2{
  color: @orange-color2;
}
/*************************miselanius styles*************************/
.shadow{
  -moz-box-shadow: 5px 5px  7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 5px 5px  7px rgba(0, 0, 0, 0.3);
  box-shadow: 5px  5px  7px rgba(0, 0, 0, 0.3);
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#444444')";
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#444444');
}
.text-shadow{
  text-shadow: 0 1px 0px rgba(0, 0, 0, 0.3);
}
.text-shadow-big{
  text-shadow: 4px 4px 9px rgba(42, 42, 42, 1);
}
.border-radius {
  border-radius: 3px;
}

.remove-border-radius{
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -webkit-transition: all 300ms cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -moz-transition: all 300ms cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -ms-transition: all 300ms cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -o-transition: all 300ms cubic-bezier(0.000, 0.535, 0.315, 1.000);
  transition: all 300ms cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -webkit-transition-timing-function: cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.000, 0.535, 0.315, 1.000);
  -o-transition-timing-function: cubic-bezier(0.000, 0.535, 0.315, 1.000);
  transition-timing-function: cubic-bezier(0.000, 0.535, 0.315, 1.000);
}

.f-btn{
  float: left;
  display: block;
  padding: 5px 10px;
  background: @orange-color;
  color: #fff;
}
.f-btn:hover,.f-btn{
  text-decoration: none;
  color: #fff;
}

/*************************layout styles*************************/
body{
  background:@bgColor;
}
.parallax-bg{
  overflow: hidden;
  position:absolute;
  width:100%; height: 800px;
  z-index:-1000;
  background: url("../img/slider2.jpg") no-repeat 0 0;
  background-size: 130%;
}
.f-section-content{
  max-width: 1024px!important;
  margin: 0 auto;
}
/************************header styles************************/
.setMenuHeight{
  overflow: visible;
  height: @menuheight;
}
.f-header{
  overflow: hidden;
  .f-logo-menu{
    width:1024px;
  }
  .navbar{
    position: relative;
    z-index: 1000;
    .setMenuHeight;
    margin-bottom:0px;
    background-color:@ligthGreen-color;    
    .shadow;
  }
  .navbar-inner{
    .setMenuHeight;
    border: 0;
    background: none!important;
  }
  .nav{
    margin: 0 50px;
  }
  .nav li a{
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-weight: 400;
  }
  .nav li a:hover, .nav li a.active{
    background: @mainGreen-color;
    color: #fff;
  }
  .dropdown .caret{
    margin-top: 12px!important;
    border-top-color: #fff!important;
    border-bottom-color: #fff!important;
  }
  .dropdown.open a{
    color: #ffffff!important;
    background-color:@mainGreen-color!important;
  }
  .dropdown-menu{
    margin: 0; padding: 0;
    border-radius: 0; border: none;
    background-color:@mainGreen-color;
  }
  .dropdown-menu::after,
  .dropdown-menu::before{
    display: none!important;
  }
  .dropdown-menu li:hover a{
    text-decoration: underline;
  }
  .f-logo{
    padding: 0; 
    margin-left: -21px;
    background-repeat: no-repeat;
    background-position: center 5px;
    background-color: #fff;
  }
  .f-logo img{
    margin: -1px 0 0 0;
  }
  .f-logo.visible-desktop{
    width: 200px; height: 140px;   
    background-image: url("../img/fructa-logo.jpg");
    background-position: center 0;
    border-bottom-right-radius: 100%;
    border-bottom-left-radius:100%;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
  }
  .f-logo.hidden-desktop{
    width: 150px; height: 51px;   
    background-image: url("../img/fructa-fruitless.png");
    background-size: 80%;
    .border-radius;
  }
}

/*************************slider styles*************************/
.f-slider{
  position: relative;
  padding-top: 100px;
  background: #fff;
  -webkit-border-bottom-left-radius: 40px;
  -moz-border-bottom-left-radius: 40px;
  border-bottom-left-radius: 40px;
}
.f-slider ul{
  float: left;
}

.f-slider li h2, .f-slider li p, .f-slider li img, .f-slider li a{
  margin: 10px 20px;
}
.f-slider li img{
  height: auto!important;
  width: 80%!important;
}
/*************************content styles*************************/
.f-content{
  position: relative;
  margin-top: -210px;
  .hero-title{
    font-size:3.5em;
    line-height: 1em;
    text-align:center;
    font-weight:bold;
    color:@yellow-color;
    .text-shadow-big;
  }
  .f-product-grid{
    margin-top: 40px;
    .f-product{
      text-align:center;
      .f-product-border{
        background:@bgColor;
        border-radius:100%;
        padding:15px;
        width:70%;
        margin:0 auto;
        img{
          .shadow;
          border-radius:100%;
          width:100%;
        }
        
      }
      .f-product-border:hover img{
        .remove-border-radius;
      }
      .f-product-border:hover{
        .remove-border-radius;
      }
      h3{
        padding:0px;
        margin:0px;
        color:@ligthGreen-color;
      }
      p{
        text-align:center;
        padding:0 15px 15px 15px;
        color:@mainGreen-color;
      }
    }
  }
}
/*************************info grid styles*************************/
.f-info-grid{
  background:url("../img/bg-info-section.png") @mainGreen-color;
  width:100%;
  padding:20px 0;
  .shadow;
  .f-info-grid-box{
    width:1024px;
    margin:0 auto;
    .f-white-textbox{
      background:url("../img/white-bg.png");
      border:1px solid #ccc;
      padding:15px;
      color:#fff;
      h3{
        margin:0px;
        .text-shadow;
      }
      a{
        color:@ligthGreen-color;
      }
    }
/*  
.f-white-textbox:hover{
transition: 0.5s;
-webkit-transition: 0.5s; 
background:@yellow-ligth-color;
color:@mainGreen-color;
h3{
color:@mainGreen-color;
}
a{
color:@mainGreen-color;
}
}
*/
.quality{}
.basic-info{}
.contact-us{}
.sostainability{
  margin-top:20px;
}
}
}

/*************************footer styles*************************/
.f-footer{
  p{
    margin:20px auto;
    text-align:center;
    color:@greenColor;
  }
}